<template>
  <div class="son-container">
    <!-- 添加商品 -->
    <div class="add-category">
      <div>
        <i class="el-icon-tickets"></i>
        <span>数据列表</span>
      </div>
      <div>
        <el-button type="primary" size="small" @click="router.push('/home/add/cate')">添加</el-button>
      </div>
    </div>
    <div class="table-content">
      <el-table :data="tableData.list" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="80"> </el-table-column>
        <el-table-column prop="name" label="分类名称" width="300"> </el-table-column>
        <el-table-column prop="level" label="级别"> </el-table-column>
        <el-table-column prop="nav" label="导航栏">
          <template #default="scope">
            <el-switch v-model="scope.row.nav" active-text="是" inactive-text="否"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="show" label="是否显示">
          <template #default="scope">
            <el-switch v-model="scope.row.is_show" active-text="是" inactive-text="否"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="router.push('/home/edit/cate/' + scope.row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="sonHandleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSonSizeChange" @current-change="handleSonCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background> </el-pagination>
    </div>
  </div>
</template>

<script setup>
import axios from '@/utils/request.js'
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 创建路由对象
const route = useRoute()
const router = useRouter()

const id = route.params.id // 上级分类id
let loading = ref(false)
let categoryList = reactive({ list: [] })
let tableData = reactive({ list: [] })
let currentPage = ref(1)
let pageSize = ref(5)
let total = ref(0)

// 删除二级分类
const sonHandleDelete = async (row) => {
  loading.value = true
  try {
    const data = await axios.post('/bus/del/category/' + row.id)
    if (data.code === 0) {
      ElMessage({
        message: data.msg,
        type: 'success'
      })
    } else {
      ElMessage({
        message: data.msg,
        type: 'error'
      })
    }
  } catch {
    ElMessage.error('请求失败！')
  } finally {
    tableData.list = []
    loading.value = false
    getSonLevel()
  }
}

// 二级分类切换页数和每一页长度
const handleSonSizeChange = (val) => {
  pageSize.value = val
  tableData.list = []
  // 根据当前页和每一页长度进行数据渲染
  for (let i = (currentPage.value - 1) * pageSize.value; i < currentPage.value * pageSize.value; i++) {
    if (categoryList.list[i]) {
      tableData.list.push({
        ...categoryList.list[i],
        is_show: categoryList.list[i].is_show === '1' ? true : false,
        nav: categoryList.list[i].nav_show === '1' ? true : false
      })
    }
  }
}
const handleSonCurrentChange = (val) => {
  currentPage.value = val
  tableData.list = []
  // 根据当前页和每一页长度进行数据渲染
  for (let i = (currentPage.value - 1) * pageSize.value; i < currentPage.value * pageSize.value; i++) {
    if (categoryList.list[i]) {
      tableData.list.push({
        ...categoryList.list[i],
        is_show: categoryList.list[i].is_show === '1' ? true : false,
        nav: categoryList.list[i].nav_show === '1' ? true : false
      })
    }
  }
}
// 获取二级分类数据
const getSonLevel = async () => {
  loading.value = true // 显示加载状态
  try {
    const data = await axios.get('/bus/category/list/' + id)
    if (data.code === 0) {
      ElMessage({
        message: data.msg,
        type: 'success'
      })
      categoryList.list = data.data
      total.value = data.data.length
      // 处理数据
      for (let i = (currentPage.value - 1) * pageSize.value; i < currentPage.value * pageSize.value; i++) {
        if (categoryList.list[i]) {
          tableData.list.push({
            ...categoryList.list[i],
            is_show: categoryList.list[i].is_show === '1' ? true : false,
            nav: categoryList.list[i].nav_show === '1' ? true : false
          })
        }
      }
    } else if (data.code === 403 || data.msg === '身份认证错误') {
      ElMessage({
        message: data.msg,
        type: 'error'
      })
      localStorage.removeItem('bus_token')
      router.replace('/login')
    }
  } catch {
    ElMessage({
      message: '请求失败！',
      type: 'error'
    })
  } finally {
    loading.value = false
  }
}
getSonLevel()
</script>

<style lang="scss" scoped>
.son-container {
  padding: 30px 50px;

  .add-category {
    height: 50px;
    min-width: 1020px;
    border: 1px solid #e1e1e1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;

    span {
      margin-left: 5px;
    }
  }
  .table-content {
    margin-top: 20px;
  }
  :deep(.el-table .el-table__cell) {
    text-align: center;
  }

  :deep(.el-pagination) {
    text-align: right;
    margin-top: 15px;
  }
}
</style>
